<template>
  <div>
    <div ref="mapRef" class="w-full h-full"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import mapJson from '../assets/MapData/china.json'

const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})

const mapRef = ref(null)
let myChart: any = null
onMounted(() => {
  myChart = echarts.init(mapRef.value)
  echarts.registerMap('china', mapJson as any)
  renderChart()
})

const renderChart = () => {
  let option = {
    // 时间轴
    timeline: {
      data: props.data.voltageLevel,
      // 轴的类型
      axisType: 'category',
      autoPlay: true,
      playInterval: 3000,
      bottom: 0,
      left: '10%',
      right: '10%',
      width: '80%',
      label: {
        color: '#ddd'
      },
      // 高亮
      emphasis: {
        label: {
          color: '#fff'
        },
      },
      lineStyle: {
        color: '#555'
      },
      checkpointStyle: {
        borderColor: '#ccc',
      },
      controlStyle: {
        color: '#666',
        borderColor: '#666',
      }
    },
    grid: {
      top: '15%',
      right: '2%',
      bottom: '10%',
      width: '20%'
    },
    // 地理坐标系
    geo: {
      show: true,
      map: 'china',
      // 开启缩放
      roam: true,
      // 初始缩放比例
      zoom: 0.8,
      center: [113.83531246, 34.0267395887],
      itemStyle: {
        borderColor: 'rgba(147, 235, 248, 1)',
        borderWidth: 1,
        areaColor: {
          tyoe: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [
            { offset: 0, color: 'rgba(147, 235, 248, 0)'},
            { offset: 1, color: 'rgba(147, 235, 248, .2)'},
          ],
          globalCoord: true
        }
      },
      emphasis: {
        itemStyle: {
          areaColor: '#389BB7',
          borderWidth: 0
        }
      }
    },
    options: [] as any,
  }

  props.data.voltageLevel.forEach((item: any, index: number) => {
    option.options.push({
      backgroundColor: '#142037',
      title: [
        {
          text: '2019~2013 年度数据统计',
          textStyle: {
            color: '#ccc',
            fontSize: 30,
          },
          top: 0,
          left: 0
        },
        {
          text: item + '年数据统计情况',
          textStyle: {
            color: '#ccc',
            fontSize: 20,
          },
          top: '4%',
          right: 0
        }
      ],
      xAxis: {
        type: 'value',
        // 为true时不显示0刻度
        scale: true,
        position: 'top',
        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          margin: 2,
          color: '#aaa'
        }
      },
      yAxis: {
        type: 'category',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#ddd'
          }
        },
        axisTick: {
          show: false,
          lineStyle: {
            color: '#ddd'
          }
        },
        axisLabel: {
          interval: 0,
          color: '#ddd'
        },
        data: props.data.categoryData[item].map((item: any) => item.name)
      },
      series: [
        {
          type: 'bar',
          zlevel: 1.5,
          itemStyle: {
            color: props.data.colors[index]
          },
          data: props.data.categoryData[item].map((item: any) => item.value),
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: props.data.topData[item],
          symbolSize: function(val: any) {
            console.log(val)
            return val[2] / 5
          },
          // 配置何时显示特效
          showEffectOn: 'render',
          // 涟漪特效
          rippleEffect: {
            brushType: 'stroke'
          },
          itemStyle: {
            color: props.data.colors[index],
            shadowBlur: 5,
            shadowColor: props.data.colors[index],
          },
          label: {
            show: true,
            position: 'right',
            formatter: '{b}'
          },
          zlevel: 1
        }
      ]
    })
  })

  myChart.setOption(option)
}

watch(() => props.data, () => {
  renderChart()
})

</script>

<style scoped>
</style>
